<template>
  <section>
    <div>
      <div class="login">偶学吧</div>
    </div>
  <van-cell-group>

    <van-field
      v-model="username"
      required
      clearable
      label="用户名"
      icon="question"
      placeholder="请输入用户名"
      @click-icon="$toast('请输入你在偶学吧平台的用户ID')"
    />
    <van-field
      v-model="password"
      type="password"
      label="密码"
      placeholder="请输入密码"
      required
    />
  </van-cell-group>
  <div class="button">
    <van-button size="large" @click="onlogin">登录</van-button>
  </div>
    <my-footer></my-footer>
  </section>
</template>

<script>
import myFooter from '../components/footer'
import * as api from '../services' // 默认index.js 是可以省略的
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    myFooter: myFooter
  },
  name: 'login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed: mapState(['forcedLogin']),
  methods: {
    ...mapMutations(['login']),
    onlogin: function () {
      // 页面跳转demo
      let that = this
      api.httpGet('ApiController/login?uname=' + this.username + '&pwd=' + this.password, function (data) {
        console.log(data)
        that.login(data)
        that.$router.push({path: '/questionList'})
      })
      // this.$toast.success('aa')
    }
  },
  created: function () {
    console.log('created')
  },
  beforeCompile: function () {
    console.log('beforeCompile')
  },
  compiled: function () {
    console.log('compiled')
  },
  attached: function () {
    console.log('attached')
  },
  dettached: function () {
    console.log('dettached')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy')
  },
  destroyed: function () {
    console.log('destroyed')
  },
  ready: function () {
    console.log('ready')
    // 组件完成后调用 $destory() 函数，进行销毁
    this.$destroy()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 80px;
  }
</style>
